<template>
  <div class="visualization-content" @click.stop="handleClick">
    <div class="toolbar" :class="settingPanelIsOpen ? '' : 'setting-closed'">
      <a-tooltip placement="top" :mouse-enter-delay="0.5">
        <template slot="title">
          <span>查看pipeline</span>
        </template>
        <div>
          <a-button type="link" style="padding: 0;" @click="togglePipeline">
            <a-icon-font
              v-if="!pipelineShow"
              class="tool-icon"
              type="iconchakanpipelinebeifen"
            ></a-icon-font>
            <a-icon-font
              v-else
              class="tool-icon"
              type="iconchakanpipeline"
            ></a-icon-font>
          </a-button>
        </div>
      </a-tooltip>
      <div
        style="background: #999; height: 14px; margin: 10px 8px; width: 1px;"
      ></div>
      <a-tooltip placement="top" :mouse-enter-delay="0.5">
        <template slot="title">
          <span>发布</span>
        </template>
        <div>
          <!-- <a-icon-font type="icondaochu"></a-icon-font> -->
          <a-button type="link" style="padding: 0;" @click="onPublish">
            <a-icon-font type="icondaochu" class="tool-icon"></a-icon-font>
          </a-button>
        </div>
      </a-tooltip>
      <a-tooltip placement="top" :mouse-enter-delay="0.5">
        <template slot="title">
          <span>布局</span>
        </template>
        <div>
          <a-button type="link" style="padding: 0;" @click="flexLayout">
            <a-icon-font
              type="iconbuju"
              class="tool-icon"
              style="font-size: 17px; transform: translateY(1px);"
            />
          </a-button>
        </div>
        <!-- <div>
          <a-icon-font class="tool-icon icon-layout ne-layout" type="iconbuju"></a-icon-font>
        </div> -->
      </a-tooltip>
      <a-tooltip placement="top" :mouse-enter-delay="0.5">
        <template slot="title">
          <span>保存</span>
        </template>
        <div>
          <a-button type="link" style="padding: 0;" @click="onSave(false)">
            <a-icon-font
              type="iconbaocun"
              class="tool-icon"
              style="font-size: 15px;"
            />
          </a-button>
        </div>
      </a-tooltip>

      <a-tooltip placement="top" :mouse-enter-delay="0.5">
        <template slot="title">
          <span>预览</span>
        </template>
        <div>
          <a-button type="link" style="padding: 0;" @click="onPreview">
            <a-icon-font
              type="iconicon-beifen3"
              class="tool-icon"
              style="font-size: 17px;"
          /></a-button>
        </div>
      </a-tooltip>
      <!-- <div class="left-option">
        画布类型：
        <a-select default-value="系统" placeholder="请选择">
          <a-select-option key="1" value="系统">系统</a-select-option>
        </a-select>
      </div> -->
      <!-- <div>
        <scale-slider />
      </div> -->
    </div>
    <div
      ref="containerbox"
      class="content-box"
      @mousemove="onContainerMouseMove"
    >
      <!-- 参考线开启/关闭控制 -->
      <div
        class="corner"
        :title="isShowRulerLine ? '隐藏参考线' : '显示参考线'"
        @click="setRulerStatus"
      >
        <img
          :title="isShowRulerLine ? '隐藏参考线' : '显示参考线'"
          :src="`${publicPath}/icon/ruler-line-${
            isShowRulerLine ? 'hide' : 'expand'
          }.svg`"
          alt="icon"
        />
      </div>
      <!-- 角边线 -->
      <div class="corner-border"></div>
      <!-- 标尺x -->
      <div ref="rulerx" class="ruler ruler-x">
        <div
          class="tick-box x"
          :style="{
            transform: `scaleX(${dataStore.scaleValue / 100}) translateX(${
              (-1 * scrollDistance.left) / (dataStore.scaleValue / 100)
            }px)`,
          }"
        >
          <span
            v-for="i in Math.ceil(
              (containerWidth * 2) / 100 / (dataStore.scaleValue / 100)
            )"
            :key="i"
            class="ruler-x-number"
          >
            <span
              class="ruler-number-text"
              :style="{
                transform: `scaleX(${1 / (dataStore.scaleValue / 100)})`,
              }"
            >
              {{ (i - 1) * 100 + containerOffset.x }}
            </span>
          </span>
        </div>
      </div>
      <!-- 标尺y -->
      <div
        ref="rulery"
        class="ruler ruler-y"
        :style="{ marginTop: `${publishBoxHeight}px` }"
      >
        <div
          class="tick-box y"
          :style="{
            transform: `scaleY(${dataStore.scaleValue / 100}) translateY(${
              (-1 * scrollDistance.top) / (dataStore.scaleValue / 100)
            }px)`,
          }"
        >
          <span
            v-for="i in Math.ceil(
              (containerHeight * 4 + 300) / 100 / (dataStore.scaleValue / 100)
            )"
            :key="i"
            class="ruler-y-number"
          >
            <span
              class="ruler-number-text"
              :style="{
                transform: ` scaleY(${1 / (dataStore.scaleValue / 100)})`,
              }"
            >
              {{ (i - 1) * 100 + containerOffset.y }}
            </span>
          </span>
        </div>
      </div>
      <!-- 画布盒子 -->
      <div
        class="graph-box"
        :class="{
          'is-setting-panel-open': settingPanelIsOpen,
          'is-recommand-panel-open': false,
        }"
        @scroll="onGraphBoxScroll"
      >
        <div
          v-if="publishTime"
          :style="{
            height: `${publishBoxHeight}px`,
            lineHeight: '18px',
            paddingBottom: '8px',
            textAlign: 'right',
          }"
        >
          {{ `系统已发布，最新发布时间：${publishTime}` }}
        </div>
        <!-- 占位盒子，由于 transform 不会影响占用宽高，会导致 graph-box 内部占用的高度不变 -->
        <div
          class="real-size-block"
          :style="realSizeStyle"
          @mouseout="onContainerMouseOut"
          @mouseenter="onContainerMouseEnter"
        >
          <!-- 布局盒子 -->
          <div class="graph" :style="graphStyle">
            <GridLayoutDesign ref="gridLayout"></GridLayoutDesign>
          </div>
        </div>
      </div>
      <!-- 参考线 -->
      <div
        v-show="showRulerLine && isShowRulerLine"
        class="ruler-line y"
        :style="{ top: lineOffsetY + 'px' }"
      ></div>
      <div
        v-show="showRulerLine && isShowRulerLine"
        class="ruler-line x"
        :style="{ left: lineOffsetX + 'px' }"
      ></div>
      <span
        v-show="showRulerLine && isShowRulerLine"
        class="rule-number y"
        :style="{ top: `${lineOffsetY}px` }"
        >{{
          parseInt(
            ((lineOffsetY - 29 + containerOffset.y) / dataStore.scaleValue) *
              100
          ) +
          scrollDistance.top / (dataStore.scaleValue / 100) -
          publishBoxHeight
        }}</span
      >
      <span
        v-show="showRulerLine && isShowRulerLine"
        class="rule-number x"
        :style="{ left: `${lineOffsetX}px` }"
        >{{
          parseInt(
            ((lineOffsetX - 29 + containerOffset.x) / dataStore.scaleValue) *
              100
          ) +
          scrollDistance.left / (dataStore.scaleValue / 100)
        }}</span
      >
    </div>

    <a-modal v-model="publishModal" title="发布系统" :footer="null">
      <div class="copy-link-box">
        <p class="copy-link-text">{{ publishUrl }}</p>
        <div class="copy-link-btn" @click="handleCopyLink">复制链接</div>
      </div>
      <div class="text-under-copy">
        <span class="left-text">链接长期有效。</span>
        <a :href="publishUrl" target="_blank" class="right-text">打开链接</a>
      </div>
      <!-- <p>
        宽屏/VR版本访问地址：<a
          :href="`${publishUrl}?env=vr`"
          target="_blank"
          >{{ publishUrl + '?env=vr' }}</a
        >
      </p> -->
    </a-modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { publicPath } from '@/api/constants'
import ScaleSlider from '@/components/visualization/ScaleSlider.vue'
import VisualizationStore from '@/store/modules/visualization'
import GridLayoutDesign from '@/components/visualization/grid-layout-design.vue'
import SideGraphSetting from '@/components/visualization/SideGraphSetting.vue'
import { publishDashboard } from '@/api/dashboard'
import {
  GridItemDataInterface,
  gridItemFilterInterface,
} from '../vueGridLayout/interfate/grid-Item-data-inteface'

@Component({
  components: {
    ScaleSlider,
    GridLayoutDesign,
    SideGraphSetting,
  },
})
export default class VisualizationContent extends Vue {
  // 项目 ID
  @Prop({ type: Number, default: 0 })
  projectId!: number

  // /**
  //  * 是否展示刻度参考线
  //  */
  // isShowRulerLine:boolean = true
  private publicPath = publicPath
  public publishToken: string = ''
  public publishModal: boolean = false
  public pipelineShow: boolean = false
  /**
   * 真实盒子宽度
   */
  containerWidth: number = 0

  /**
   * 真实盒子高度
   */
  containerHeight: number = 0

  /**
   * 刻度线x偏移量
   */
  lineOffsetX: number = 0

  /**
   * 刻度线y偏移量
   */
  lineOffsetY: number = 0

  /**
   * 画布滚动实际距离
   */
  scrollDistance: { left: number; top: number } = { left: 0, top: 0 }

  /**
   * 鼠标hover状态
   */
  isMouseOver: boolean = true

  get isShowRulerLine(): boolean {
    return this.dataStore.isShowRulerLine
  }

  localPublishTime: string | null = null
  get publishTime(): string | null {
    if (this.localPublishTime !== null) {
      return this.localPublishTime
    }
    if (VisualizationStore?.currentDashboard?.projectId !== this.projectId) {
      // 未加载完则不显示 避免闪现问题
      return null
    }
    const t = VisualizationStore.currentDashboard.publishTime
    if (t !== null && t !== undefined) {
      return `${t.slice(0, 4)}年${t.slice(5, 7)}月${t.slice(8, 10)}日`
    }
    return null
  }
  get publishBoxHeight(): number {
    return this.publishTime === null ? 0 : 26
  }

  public handleCopyLink() {
    navigator.clipboard.writeText(this.publishUrl).then(
      () => {
        this.$message.success('发布链接复制成功')
      },
      (error: any) => {
        this.$message.error(error)
      }
    )
  }

  public handleClick() {
    VisualizationStore.changePreviewPopStatus('close')
  }

  public toggleSettingPanel() {
    VisualizationStore.setSettingPanelIsOpen(!this.settingPanelIsOpen)
  }

  public togglePipeline() {
    this.pipelineShow = !this.pipelineShow
    this.$emit('toggle-pipeline')
  }

  public get publishUrl(): string {
    const { protocol, host } = window.location
    return `${protocol}//${host}/publish/${this.publishToken}`
  }

  public onPublish(): void {
    const dashboardId = VisualizationStore.currentDashboard.id
    if (!dashboardId) {
      return
    }
    // 屏蔽没有组件的情况
    if (VisualizationStore.gridList.length === 0) {
      this.$message.error('面板不存在组件')
      return
    }
    // 先保存，在发布，排除发布后空白页的问题
    const visualizationContent = VisualizationStore.VisualizationContent as any
    const me = this

    if (
      visualizationContent &&
      typeof visualizationContent.onSave === 'function'
    ) {
      const configurationWidget = VisualizationStore.gridList.filter(
        (gridItem) => gridItem.chartType === 'configuration'
      )
      const h = this.$createElement
      const callback = () => {
        me.$confirm({
          title: '确定要发布吗？',
          content: h('div', {}, [
            h('p', '发布后可与他人分享可视化'),
            h('a-checkbox', { class: 'water-mark-check' }, '添加系统水印'),
          ]),
          okText: '确定',
          cancelText: '取消',
          onOk() {
            const target = document.querySelector(
              '.water-mark-check .ant-checkbox'
            )
            const showWatermark = target?.classList.contains(
              'ant-checkbox-checked'
            )
            return new Promise((resolve, reject) => {
              publishDashboard({
                data: {
                  projectId: me.projectId,
                  id: dashboardId,
                  isComplex: true, // configurationWidget.length > 0,
                  pipelineId: configurationWidget[0]
                    ? configurationWidget[0].chartOptions.pipelineId
                    : '',
                  showWatermark, //  if show Watermark in publish view
                },
              })
                .then((response: any) => {
                  const publishToken = response.data.result
                  me.publishToken = publishToken
                  me.publishModal = true

                  const d = new Date()
                  me.localPublishTime = `${d.getFullYear()}年${
                    d.getMonth() + 1
                  }月${d.getDate()}日`

                  // 这里最好需要将结果传递出来
                  resolve(response)
                })
                .catch(() => {
                  reject()
                })
            }).catch(() => console.log('publish errors!'))
          },
        })
      }
      visualizationContent.onSave(true, callback)
    }
  }

  /**
   * 监听画布鼠标移动
   */
  onContainerMouseMove(event: any): void {
    if (event) {
      this.isMouseOver = true
      const point = this.getOffset(this.$refs.containerbox)
      this.lineOffsetX = (event.pageX as number) + point.x
      this.lineOffsetY = (event.pageY as number) + point.y
    }
  }

  /*
   * 鼠标移出
   */
  onContainerMouseOut(/* event: any */): void {
    this.isMouseOver = false
  }

  /*
   * 鼠标移入
   */
  onContainerMouseEnter(/* event: any */): void {
    this.isMouseOver = true
  }

  /**
   * 获取某个元素距离body左上角的距离
   */
  getOffset(target: any): { x: number; y: number } {
    let ele = target
    let o = ele
    let x = 0
    let y = 0
    while (o.offsetParent) {
      x += o.offsetLeft
      y += o.offsetTop
      o = o.offsetParent
    }
    // 处理当元素处于滚动之后的情况
    let left = 0
    let top = 0
    while (ele.parentNode) {
      left += ele.scrollLeft
      top += ele.scrollTop
      ele = ele.parentNode
    }
    return {
      x: left - x,
      y: top - y,
    }
  }

  /**
   * 是否展示参考线
   */
  public get showRulerLine(): boolean {
    return (
      this.isMouseOver &&
      this.lineOffsetY > 29 + this.publishBoxHeight &&
      VisualizationStore.layoutData.height + 50 > this.lineOffsetY &&
      this.lineOffsetX > 30 &&
      VisualizationStore.layoutData.width + 50 > this.lineOffsetX
    )
  }

  /**
   * 真实盒子占用宽高
   */
  get realSizeStyle() {
    return {
      width: `${
        (VisualizationStore.layoutData.width * VisualizationStore.scaleValue) /
        100
      }px`,
      minHeight: `${VisualizationStore.layoutData.height}px`,
    }
  }

  /**
   * 画布样式
   */
  get graphStyle() {
    return {
      transform: `scale(${VisualizationStore.scaleValue / 100}, ${
        VisualizationStore.scaleValue / 100
      })`,
      width: `${VisualizationStore.layoutData.width}px`,
      minHeight: `${VisualizationStore.layoutData.height}px`,
      // height: `${VisualizationStore.layoutData.height}px`,
      background: VisualizationStore.layoutData.background,
    }
  }

  /**
   * store 模板使用变量
   */
  get dataStore() {
    return VisualizationStore
  }

  /**
   * 同步设置弹框展示状态
   */
  get settingPanelIsOpen() {
    return VisualizationStore.settingPanelIsOpen
  }

  /**
   * 激活选项
   */
  get activeSettingItem() {
    return VisualizationStore.activeSettingItem
  }

  @Watch('activeSettingItem')
  handleActiveSetItem(newValue: any, oldValue: any) {
    if (oldValue === 'chart' && newValue) {
      this.onSave(false)
    }
  }

  /**
   * 同步推荐面板
   */
  get recommandPanelOpen() {
    return VisualizationStore.isRecommandPanelOpen
  }

  /**
   * 画布偏移量
   */
  public containerOffset: { x: number; y: number } = { x: 0, y: 0 }

  mounted() {
    const win = window as any
    const that = this
    this.initRulers()
    function resize() {
      that.initRulers()
    }
    win.addEventListener('resize', resize)
    this.$once('hook:beforeDestroy', () => {
      win.removeEventListener('resize', resize)
    })
    // 每次进来组件面板恢复原样
    VisualizationStore.setIsFullMode(false)
    VisualizationStore.setVisualizationContent(this)
  }

  /**
   * 初始化标尺
   */
  initRulers() {
    const rulerx = this.$refs.rulerx as HTMLElement
    const rulery = this.$refs.rulery as HTMLElement
    if (rulerx) {
      this.containerWidth = rulerx.offsetWidth
    }
    if (rulery) {
      this.containerHeight = Math.max(
        rulery.offsetHeight,
        this.dataStore.layoutData.height
      )
    }
  }

  /**
   * 设置参考线状态
   */
  setRulerStatus() {
    this.dataStore.setIsShowRulerLine(!this.isShowRulerLine)
  }

  /**
   * 画布盒子滚动监听
   */
  onGraphBoxScroll(event: Event) {
    const element = event.target as HTMLElement
    if (element) {
      this.scrollDistance = {
        left: element.scrollLeft,
        top: element.scrollTop,
      }
    }
  }

  /**
   * 同步控件组件的高度
   */
  syncFilterHeight(gridItem: gridItemFilterInterface, callback?: Function) {
    const gridLayout = this.$refs.gridLayout as any
    if (gridLayout) {
      gridLayout.syncFilterHeight(gridItem, callback)
    }
  }

  /**
   * 编辑/添加控件（此处用于main.vue调用）
   */
  editChart(gridItem: GridItemDataInterface) {
    const gridLayout = this.$refs.gridLayout as any
    if (gridLayout) {
      gridLayout.editChart(gridItem)
    }
  }

  /**
   * 保存
   */
  onSave(noMessage = false, callback?: Function) {
    const gridLayout = this.$refs.gridLayout as any
    if (gridLayout) {
      gridLayout.onSave(noMessage, callback)
    }
  }

  /**
   * 预览
   */
  onPreview() {
    VisualizationStore.changeVisualizationMode('preview')
  }

  /**
   * 布局
   */
  flexLayout() {
    const gridLayout = this.$refs.gridLayout as any
    if (gridLayout) {
      gridLayout.flexLayout()
    }
  }
}
</script>
<style lang="less" scoped>
@import '@/constants';

.visualization-content {
  background: #f8f8f8;
  display: flex;
  flex-flow: row;
  flex-flow: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  z-index: 61;

  .toolbar {
    background-color: @VISUALIZATION_TOOLBAR_BACKGROUND;
    border-bottom: 1px solid @VISUALIZATION_TOOLBAR_BORDER;
    display: flex;
    flex-direction: row-reverse;
    height: @VISUALIZATION_TOOLBAR_HEIGHT;
    line-height: @VISUALIZATION_TOOLBAR_HEIGHT;
    padding-right: 4px;
    transition: width ease 0.2s;
    vertical-align: middle;
    width: calc(100% - 300px);

    &.setting-closed {
      padding-right: 10px;
      width: 100%;
    }

    .left-option {
      left: 12px;
      position: absolute;
    }

    .tool-icon {
      cursor: pointer;
      font-size: 16px;
      height: 26px;
      margin: 0 2px;
      padding: 4px;

      &:hover {
        background-color: #f1f1f1;
        color: #6973ff;
      }

      &.icon-layout {
        font-size: 20px;
        // width: 18px;
      }
    }

    /deep/ .ant-btn.ant-btn-link {
      color: #5d637e;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 1px;
      line-height: 20px;

      &:hover .tool-icon {
        background-color: #f1f1f1;
        color: #5561ff !important;
      }
    }
  }

  .content-box {
    box-sizing: border-box;
    flex: 1;
    height: 100%;
    overflow: hidden;
    padding-left: 20px;
    padding-top: 20px;
    position: relative;
    width: 100%;

    .corner-border {
      border-left: 1px solid #cacbd2;
      border-top: 1px solid #cacbd2;
      height: 38px;
      left: 20px;
      pointer-events: none;
      position: absolute;
      top: 19px;
      width: 12px;
      z-index: 220;
    }

    .ruler {
      left: 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      z-index: 20;

      &.ruler-x {
        height: 20px;
        width: 100%;
      }

      &.ruler-y {
        height: calc(100vh - 100px);
        width: 21px;
      }

      .tick-box {
        left: 0;
        position: absolute;
        top: 0;

        &.x {
          background: url('~@/assets/view/ruler-x.png') repeat-x;
          background-color: #f9f9fc;
          height: 20px;
          margin-left: 30px;
          overflow: hidden;
          transform-origin: 0 0;
          width: 600%;
        }

        &.y {
          background: url('~@/assets/view/ruler-y.png') repeat-y;
          background-color: #f9f9fc;
          border-right: 1px solid #ccc;
          box-sizing: border-box;
          height: 600%;
          left: 0;
          margin-left: 1px;
          position: absolute;
          top: 29px;
          transform-origin: 0 0;
          width: 20px;
          z-index: 1000;
        }
      }
    }

    .corner {
      background: rgb(249, 249, 252);
      border: 2px solid #f8f8f8;
      height: 21px;
      left: 0;
      position: absolute;
      top: 0;
      width: 21px;
      z-index: 100;

      img {
        display: block;
        height: auto;
        transform: translate(2px, 2px);
        width: 16px;
      }
    }

    .ruler-x-number {
      box-sizing: border-box;
      color: #7a7f96;
      display: inline-block;
      font-size: 10px;
      height: 20px;
      padding-left: 2px;
      text-align: left;
      width: 100px;
    }

    .ruler-number-text {
      display: block;
      transform-origin: 0 0;
    }

    .ruler-y-number {
      box-sizing: border-box;
      color: #7a7f96;
      display: block;
      font-size: 10px;
      height: 100px;
      padding-bottom: 2px;
      padding-top: 2px;
      position: relative;
      text-align: right;
      width: 20px;

      .ruler-number-text {
        pointer-events: none;
        position: absolute;
        right: 2px;
        top: 2px;
        writing-mode: vertical-rl;
      }
    }

    .ruler-line.y {
      border: 1px dashed #aeb2f5;
      box-sizing: border-box;
      display: block;
      height: 1px;
      left: 0;
      pointer-events: none;
      position: absolute;
      top: 100px;
      width: 100%;
      z-index: 11;
    }

    .ruler-line.x {
      border: 1px dashed #aeb2f5;
      box-sizing: border-box;
      content: ' ';
      display: block;
      height: 100%;
      left: 100px;
      pointer-events: none;
      position: absolute;
      top: -10px;
      width: 1px;
      z-index: 11;
    }

    .rule-number {
      color: #5760e6;
      font-size: 10px;
      position: absolute;
      z-index: 12;

      &.x {
        display: block;
        top: 30px;
        transform: rotate(90deg) translate(4px, -2px);
      }

      &.y {
        display: block;
        left: 30px;
      }
    }
  }

  .graph-box {
    height: calc(100vh - 132px);
    overflow-y: scroll;
    padding: 6px 20px 20px 10px;
    transition: width ease-in 0.2s, height ease-in 0.2s;

    &::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(144, 147, 153, 0.5);
      border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 5px;
    }

    &.is-setting-panel-open {
      width: calc(100% - 282px);
    }

    &.is-recommand-panel-open {
      height: calc(100vh - 330px);
    }
  }

  .real-size-block {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
    display: block;
    height: auto;
    overflow: hidden;
    width: 100%;
  }

  .graph {
    height: auto;
    transform-origin: 0 0;
  }
}

/deep/ .ant-modal-body {
  padding-bottom: 58px;
}

.copy-link-box {
  display: flex;

  .copy-link-text {
    background: #f9f9fc;
    border: 1px solid #e8e8e8;
    border-radius: 2px 0 0 2px;
    color: #5d637e;
    flex: 1;
    font-size: 14px;
    height: 32px;
    line-height: 20px;
    margin-bottom: 4px;
    overflow: hidden;
    padding: 6px 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .copy-link-btn {
    align-items: center;
    background: #6973ff;
    border-radius: 0 4px 4px 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-weight: 300;
    height: 32px;
    justify-content: center;
    width: 88px;
  }
}

.text-under-copy {
  display: flex;
  justify-content: space-between;

  .left-text {
    color: #222432;
    font-size: 12px;
    height: 17px;
    opacity: 0.5;
  }

  .right-text {
    color: #6973ff;
    font-size: 12px;
    height: 17px;
  }
}
</style>
